<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" href="__ROOT__/Index/Common/css/head_end.css"/>
    <link rel="stylesheet" type="text/css" href="__ROOT__/Index/Common/css/order.css"/>
    <script type="text/javascript" src="__ROOT__/Index/Common/js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="head">
    <div class="del_fix">
        <!--删除提示框-->
        <div class="del_box display">
            <b>确定要删除此商品吗?</b>
            <span>
						<a class="del_real" href="javascript:void(0);">确认</a>
						<a class="cancel" href="javascript:void(0);">取消</a>
					</span>
        </div>
    </div>
    <div class="header">
        <div class="pink_logo">
            <a href="__APP__/Index/index"><img src="http://i1.mbscss.com/img/moonbasa/2014/02/25/logo.jpg" alt=""/></a>
        </div>
        <div class="practice"><span>9年品质保证</span>|<span>7天无条件退货</span>|</div>
        <div class="logininfo_outdiv">
            <div class="helpmsg">
                <span>|</span>
                <a href="">帮助中心</a>
                <a class="help_weixin lw_weixin_icon" href="">微信</a>
                <a class="help_mobile lw_mobile_icon" href="">手机版</a>
            </div>
            <div class="loginInfo">
                <if condition="!isset($_SESSION['uid'])">
                    <a href="__APP__/Login/register">注册</a>
                    <span style="color: #e8e8e8;">|</span>
                    <a href="__APP__/Login/login">登录</a>
                    <span>欢迎光临梦芭莎!</span>
                    <else/>
                    <span>欢迎光临梦芭莎!</span>
                    您好,<a class="_username" href="javascript:void(0)">{$Think.session.email}</a>
                </if>

                <!--<span>欢迎光临梦芭莎!</span>-->
            </div>
        </div>
        <!----------------------------我的购物车--》填写订单--》订单提交成功   这里雪碧图-->
        <div class="stepby stepby1"></div>
    </div>

</div>


<div class="order_min">
    <div class="order_body">
        <div class="title">
            <div class="top">
                <dt><input class="check_all" checked="checked" type="checkbox"/></dt>
                <dd class="qb">全部</dd>
                <dd class="sp">商品</dd>
                <dd class="dj">单价</dd>
                <dd class="sl">数量</dd>
                <dd class="jexj">金额小计</dd>
                <dd class="cz">操作</dd>
            </div>
        </div>

        <!--购物车列表-->
        <div class="goods_list">
            <div class="buygoods clearfix">

                <!--未登录-->
                <div class="is_goodsnone">
                    <div class="w980">
                        <div class="section">
                            <dl>
                                <dt>您的购物车中没有商品,您可以;</dt>
                                <dd>

                                    <a href="__APP__/List/index">立即选购商品>></a>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="is_goods">
                    <!--购物车有东西-->
                    <div class="shop" id="shop">
                        <div class="title"><span class="fahuo">以下商品由 梦芭莎 发货</span><span class="yunfei">免配送费</span></div>
                        <div class="goodsList">
                            <volist name='content' id='vo'>
                                <span style="display: none" class="goodsId">{$vo.goodsId}</span>
                                <div class="nr">
                                    <dl class="top">
                                        <dt><input class="check" type="checkbox" checked="checked"/></dt>
                                        <dd class="sp">
                                                <span class="left">
                                                    <a href=""><img src="{$vo.img}"/></a>
                                                </span>
                                            <span class="right">
                                                    <span class="spmc"><a class="goods_link"
                                                                          href="">{$vo.name}</a></span>
                                                    <span class="zhiliao">品牌：韩伊儿　尺寸：<span
                                                            class="goodsSize">{$vo.size}</span>　颜色：<span
                                                            class="goodsColor">{$vo.color}</span></span>
                                                </span>
                                        </dd>
                                        <dd class="dj">
                                            <p class="price">
                                                <span class="price_icon">￥</span>
                                                <span class="pri_num">{$vo.n_price}</span>
                                            </p>
                                        </dd>
                                        <dd class="sl">
                                            <a class="sl_minus" href="javascript:void(0)">-</a>
                                            <input class="sl_num" type="text" value="{$vo.goodsNum}"/>
                                            <a class="sl_add" href="javascript:void(0)">+</a>
                                        </dd>
                                        <dd class="jexj">
                                            <span class="price_icon">￥</span>
                                            <span class="xiaoji">0</span>
                                        </dd>
                                        <dd class="cz">
                                            <p class="xiugai" onclick="change({$vo.goodsId})">
                                                <span class="cz_edit operation">修改</span>
                                            </p>
                                            <p class="shanchu">
                                                <span class="cz_del operation"
                                                      onclick="removeGoods('{$vo.goodsId}','{$vo.size}','{$vo.color}')">移除</span>
                                            </p>
                                        </dd>
                                    </dl>
                                </div>
                            </volist>
                        </div>
                    </div>
                </div>
            </div>
            <div class="is_goods">
                <div class="paym">
                    <div class="cleargoods"></div>
                    <div class="goodsmoney">
                        <div class="zs">
                            商品数量总计
                            <span class="pics">42件</span>
                            <span class="zj">折后商品金额总计</span>:
                            <span class="rmb">￥</span>
                            <span class="howmuch">0.00</span>
                        </div>
                    </div>
                    <div class="moreorpay">
                        <div class="fl">
                            <img class="payewm" src="" alt=""/>
                            <img class="sao" src="http://i0.mbscss.com/img/moonbasa/2015/04/01/qc_code_bg.jpg" alt=""/>
                        </div>
                        <div class="fr skip">
                            <span class="to_pay" onclick="subOrders()">去结算</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--促销活动-->
        <div class="promotion">

        </div>

        <!--删除商品的样式-->
        <div class="delete_goods display">
            <div class="rxtitle">
                <h3 class="del_title">已删除的商品,您可以重新购买或收藏:</h3>
                <div class="del-con clearfix"></div>
            </div>
        </div>


        <!--热销商品-->
        <div class="hot_sell">
            <div class="hot_sell_goods">
                <div class="hs_title">
                    <h3>热销商品</h3>
                </div>
                <div class="hs_goods">
                    <ul class="hs_goods_list">
                        <li class="list1">
                            <volist name='list' id='vo1' offset='0' length='5'>
                                <dl>
                                    <dt><a href=""><img src="{$vo1.color_img}"/></a></dt>
                                    <dd>
                                        <p class="ptitle"><a href="">{$vo1.name}</a></p>
                                        <p class="sales">￥{$vo1.n_price}.00
                                            <del>￥{$vo1.b_price}</del>
                                        </p>
                                        <p class="joincar" onclick="addCar({$vo1.id})"><a href="javascript:void(0)">加入购物车</a>
                                        </p>
                                    </dd>
                                </dl>
                            </volist>
                        </li>
                        <li class="list2 display">
                            <volist name='list' id='vo1' offset='6' length='5'>
                                <dl>
                                    <dt><a href=""><img src="{$vo1.color_img}"/></a></dt>
                                    <dd>
                                        <p class="ptitle"><a href="">{$vo1.name}</a></p>
                                        <p class="sales">￥{$vo1.n_price}.00
                                            <del>￥{$vo1.b_price}</del>
                                        </p>
                                        <p class="joincar" onclick="addCar({$vo1.id})"><a href="javascript:void(0)">加入购物车</a>
                                        </p>
                                    </dd>
                                </dl>
                            </volist>
                        </li>
                    </ul>
                </div>
                <div class="newa">
                    <div class="rxdot">
                        <span class="on"></span>
                        <span></span>
                    </div>
                    <div class="morea"><a class="change_more" href="javascript:void(0)">换一组</a></div>
                </div>
            </div>
        </div>


        <!--营销活动-->
        <div class="cuxiaohuodong display">
            <div class="cuxiao">
                <div class="cuxiao_title">
                    <span class="click other color">其他顾客同时购买了</span>
                    <!--<span class="c_line">|</span>-->
                    |
                    <span class="click lately">最近收藏的商品</span>
                </div>
                <div class="cuxiao_con">
                    <div class="hs_goods">
                        <ul class="cuxiao_list">

                            <!--其他顾客购买列表-->
                            <li>
                                <dl>
                                    <dt><a href=""><img
                                            src="http://images.moonbasa.com/ProductImg/88/1703/large/011017308-009-01-L.jpg"/></a>
                                    </dt>
                                    <dd>
                                        <p class="ptitle"><a href="">梦芭莎星影婆娑无痕内衣无钢圈减压肩带</a></p>
                                        <p class="sales">￥129.00
                                            <del>￥149</del>
                                        </p>
                                        <p class="joincar"><a href="javascript:void(0)">加入购物车</a></p>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt><a href=""><img
                                            src="http://images.moonbasa.com/ProductImg/88/1703/large/011017308-009-01-L.jpg"/></a>
                                    </dt>
                                    <dd>
                                        <p class="ptitle"><a href="">梦芭莎星影婆娑无痕内衣无钢圈减压肩带</a></p>
                                        <p class="sales">￥129.00
                                            <del>￥149</del>
                                        </p>
                                        <p class="joincar"><a href="javascript:void(0)">加入购物车</a></p>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt><a href=""><img
                                            src="http://images.moonbasa.com/ProductImg/88/1703/large/011017308-009-01-L.jpg"/></a>
                                    </dt>
                                    <dd>
                                        <p class="ptitle"><a href="">梦芭莎星影婆娑无痕内衣无钢圈减压肩带</a></p>
                                        <p class="sales">￥129.00
                                            <del>￥149</del>
                                        </p>
                                        <p class="joincar"><a href="javascript:void(0)">加入购物车</a></p>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt><a href=""><img
                                            src="http://images.moonbasa.com/ProductImg/88/1703/large/011017308-009-01-L.jpg"/></a>
                                    </dt>
                                    <dd>
                                        <p class="ptitle"><a href="">梦芭莎星影婆娑无痕内衣无钢圈减压肩带</a></p>
                                        <p class="sales">￥129.00
                                            <del>￥149</del>
                                        </p>
                                        <p class="joincar"><a href="javascript:void(0)">加入购物车</a></p>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt><a href=""><img
                                            src="http://images.moonbasa.com/ProductImg/88/1703/large/011017308-009-01-L.jpg"/></a>
                                    </dt>
                                    <dd>
                                        <p class="ptitle"><a href="">梦芭莎星影婆娑无痕内衣无钢圈减压肩带</a></p>
                                        <p class="sales">￥129.00
                                            <del>￥149</del>
                                        </p>
                                        <p class="joincar"><a href="javascript:void(0)">加入购物车</a></p>
                                    </dd>
                                </dl>
                            </li>

                            <!--最近收藏列表-->
                            <li class="display">
                                <dl>
                                    <dt><a href=""><img
                                            src="http://images.moonbasa.com/ProductImg/88/1703/large/011017308-009-01-L.jpg"/></a>
                                    </dt>
                                    <dd>
                                        <p class="ptitle"><a href="">梦芭莎星影婆娑无痕内衣无钢圈减压肩带</a></p>
                                        <p class="sales">￥129.00
                                            <del>￥149</del>
                                        </p>
                                        <p class="joincar"><a href="javascript:void(0)">加入购物车</a></p>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt><a href=""><img
                                            src="http://images.moonbasa.com/ProductImg/88/1703/large/011017308-009-01-L.jpg"/></a>
                                    </dt>
                                    <dd>
                                        <p class="ptitle"><a href="">梦芭莎星影婆娑无痕内衣无钢圈减压肩带</a></p>
                                        <p class="sales">￥129.00
                                            <del>￥149</del>
                                        </p>
                                        <p class="joincar"><a href="javascript:void(0)">加入购物车</a></p>
                                    </dd>
                                </dl>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>

<!--遮罩层-->
<div class="Mask display"></div>
<!--修改商品信息-->
<div class="revise_goods display">
    <div class="revise_title">
        <span class="revise_title_l">选择颜色尺码</span>
        <a class="revise_close" href="javascript:void(0)"><span class="revise_close_i"></span></a>
    </div>
    <div class="revise_cont">

        <div class="productmain">
            <div class="size_color clear">
                <div class="size_color_img">
                    <img id='size_color_img' width="100" src="" alt=""/>
                </div>
                <div class="change_r">
                    <div class="color">
                        <ul>
                            <li><b id="goodsName"></b></li>
                            <li class="hue">颜色:</li>
                            <li class="txt">
                                <span class="_red" id="_red"></span>
                                <span class="spancolor" id="spancolor">
											<!--颜色缩略图片-->
										</span>
                            </li>
                        </ul>
                    </div>
                    <div class="size">
                        <ul>
                            <li class="hue">尺寸:</li>
                            <li class="txt">
										<span id="chooseSize">
											<!--尺寸列表-->
										</span>
                            </li>
                        </ul>
                    </div>
                    <div class="productnum">
                        <ul class="clear">
                            <li><span>数量:</span></li>
                            <li>
                                <select name="" id="chooseNum" value="数量">                        
                                    <option value="1"  selected = "selected">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select>
                            </li>
                            <li>
                                <span class="_red">现在有货</span>
                            </li>
                        </ul>
                    </div>


                </div>
            </div>
            <div class="productbottom clear">
                <input class="pro_cancel" type="button" value="取消"/>
                <input class="pro_sure" type="button" value="确定" onclick="save()"/>
            </div>
        </div>
    </div>
</div>
<div class="foot">
    <include file="./Index/Common/public/footer.html"/>
</div>
</body>
<script type="text/javascript" src="__ROOT__/Index/Common/js/order.js"></script>
<script>
    if (!{$is_show}) {
        $('.is_goodsnone').css('display', 'none');
    } else {
        $('.is_goods').css('display', 'none');
    }
    var changeGoodsId = null;
    var removeGoodsId = null;
    var colorText = [];
    var chooseColor = null;

    function change(num) {
        changeGoodsId = num;
        var id = num;
        $.ajax({
            type: "POST",
            url: "__URL__/getInfo",
            data: {
                id
            },
            dataType: "json",
            success: function (data) {
                colorText = data.data.color;
                console.log(data.data);
                //商品名称
                $('#goodsName').html(data.data.name);
                //图片
                var strImg = '';
                if (typeof(data.data.color_img) != 'string') {
                    $("#size_color_img").attr("src", data.data.color_img[0]);
                    for (var i = 0; i < data.data.color_img.length; i++) {
                        strImg += '<a class="selectcolor" href="javascript:void(0)"><img width="20px;" height="20px;" src="' + data.data.color_img[i] + '"/></a>';
                    }
                } else {
                    $("#size_color_img").attr("src", data.data.color_img);
                    strImg += '<a class="selectcolor" href="javascript:void(0)"><img width="20px;" height="20px;" src="' + data.data.color_img + '"/></a>';
                }
                $('#spancolor').html(strImg);
                //尺码
                var strSize = '';
                for (var i = 0; i < data.data.size.length; i++) {
                    strSize += '<a class="selectsize" href="javascript:void(0)">' + data.data.size[i] + '</a>';
                }
                $("#chooseSize").html(strSize);
                //颜色文字
                $('#_red').html(data.data.color[0]);

                //修改购物车商品信息,点击换颜色
                $(".selectcolor").click(function () {
                    $(".selectcolor").removeClass("red_border_color");
                    $(this).addClass("red_border_color");
                    chooseColor = colorText[$(this).index()];
                    console.log(chooseColor);
                });

                //点击给尺码加边框
                $(".selectsize").click(function () {
                    $(".selectsize").removeClass("red_border_size");
                    $(this).addClass("red_border_size");
                })
            }
        })
    }

    function save() {
        var goodsId = changeGoodsId;
        var size = $('.red_border_size').text();
        var goodsNum = $('#chooseNum').val();
        var color = chooseColor;
        if (goodsId != '' && size != '' && goodsNum != '' && color != '') {
            $.ajax({
                type: "POST",
                url: "__URL__/change",
                data: {
                    goodsId,
                    size,
                    goodsNum,
                    color
                },
                dataType: 'json',
                success: function (data) {
                    if (data.status == 1) {
                        location.href = "__URL__/index";
                    }
                }
            })
        } else {
            console.log("输入信息不能为空");
        }
    }

    var removeGoodsSize;
    var removeGoodsColor;

    function removeGoods(id, size, color) {
        removeGoodsId = id;
        removeGoodsSize = size;
        removeGoodsColor = color;
    }

    //删除购物车各商品
    $(".cz_del").on("click", del_goods);

    function del_goods() {
        $(".del_box").removeClass("display");
        var top = $(this).offset().top - 70;
        $(".del_box").css("top", top);

        //确认删除
        $(".del_real").click($(this), function (event) {
            $.ajax({
                type: "post",
                url: "__URL__/delete",
                async: true,
                data: {
                    goodsId: removeGoodsId,
                    size: removeGoodsSize,
                    color: removeGoodsColor
                },
                success: function (data) {
                    //删除成功
                    if (data.status == 1) {
                        //删除节点
                        event.data.parent().parent().parent().remove();
                        //对话框消失
                        $(".del_box").addClass("display");
                        zs();
                        $.ajax({
                            type:'post',
                            url:'__URL__/is_empty',
                            success:function(data){
                                if(data.status==1){
                                    $('.is_goodsnone').css('display','block');
                                    $('.is_goods').css('display','none');
                                }
                            }
                        })
                    }
                }
            });
        })

        //取消删除
        $(".cancel").click(function () {
            $(".del_box").addClass("display");
        })
    }

    //添加购物车
    function addCar(num) {
        var goodsId = num;
        $.ajax({
            type: "post",
            url: "__APP__/Detail/addCar",
            async: true,
            data: {
                goodsId
            },
            success: function (data) {
                if (data.status == 1) {
//						location.href="__URL__/index";
                }
            }
        });
    }

    //加入订单
    function subOrders() {
        var arrOrder = [];
        for (let i = 0; i < $('#shop .check').length; i++) {
            if ($('#shop .check').eq(i).is(':checked')) {
                var newObj = new Object();
                newObj.goodsId = $('#shop .goodsId').eq(i).text();
                newObj.color = $('#shop .goodsColor').eq(i).text();
                newObj.size = $('#shop .goodsSize').eq(i).text();
                newObj.price = $('#shop .pri_num').eq(i).text();
                newObj.num = $('#shop .sl_num').eq(i).val();
                arrOrder.push(newObj);
            }
        }
        $.ajax({
            type: 'POST',
            url: '__URL__/order_form',
            data: {
                orderInfo: arrOrder
            },
            dataType: 'json',
            success: function (data) {
                console.log(data);
                if (data.status == 1) {
                    location.href = "__URL__/order_form_sub";
                }
            },
            error: function (err) {
                console.log(err)
            }
        })
    }

    //判断是否选择颜色尺码
    $(".pro_sure").click(function () {
        //判断尺码选择
        if ($("#spancolor a").hasClass("red_border_color") || $("#chooseSize a").hasClass("red_border_color")||("#chooseNum").attr('checked')!==undefined) {
            alert("修改成功");
//          return ;
        } else {
            alert("请选择颜色或者尺码");
        }
    })
</script>
</html>

